
import type { RentTooth } from '#ui-colors/components';
<script setup>
const props = defineProps({
	scheme: Object,
})
const emit = defineEmits(["tooth"]);
function emitTooth(item) {
	if (item === undefined) {
		return;
	}
	if (item.length === 0) {
		return;
	}
	emit('tooth', item)

}
</script>
<template>
	<div class="grid grid-cols-8 text-center">
		<div class="flex flex-col">
			<div class="basic-1/4">
				<RentTooth :ntooth="18" :itooth="scheme['18']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/4">
				<RentTooth :ntooth="10" :itooth="scheme['10']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/4">
				<RentTooth :ntooth="11" :itooth="scheme['11']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/4">
				<RentTooth :ntooth="20" :itooth="scheme['20']" @tooth="emitTooth" />
			</div>
		</div>
		<div class="flex flex-col col-span-6">
			<div class="flex flex-row justify-between text-center">
				<div class="basic-1/4">
					<RentTooth :ntooth="19" :itooth="scheme['19']" @tooth="emitTooth" />
				</div>
				<div class="basic-1/4">
					<RentTooth :ntooth="14" :itooth="scheme['14']" @tooth="emitTooth" />
				</div>
			</div>
			<div class="flex flex-row">
				<div class="basis-1/5">
					<RentTooth :ntooth="1" :itooth="scheme['1']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/5">
					<RentTooth :ntooth="2" :itooth="scheme['2']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/5">
					<RentTooth :ntooth="3" :itooth="scheme['3']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/5">
					<RentTooth :ntooth="4" :itooth="scheme['4']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/5">
					<RentTooth :ntooth="5" :itooth="scheme['5']" @tooth="emitTooth" />
				</div>
			</div>
			<div class="flex flex-row">
				<div class="basis-1/4">
					<RentTooth :ntooth="6" :itooth="scheme['6']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/4">
					<RentTooth :ntooth="7" :itooth="scheme['7']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/4">
					<RentTooth :ntooth="8" :itooth="scheme['8']" @tooth="emitTooth" />
				</div>
				<div class="basis-1/4">
					<RentTooth :ntooth="9" :itooth="scheme['9']" @tooth="emitTooth" />
				</div>
			</div>
			<div class="flex flex-row justify-between text-center">
				<div class="basic-1/4">
					<RentTooth :ntooth="21" :itooth="scheme['21']" @tooth="emitTooth" />
				</div>
				<div class="basic-1/4">
					<RentTooth :ntooth="16" :itooth="scheme['16']" @tooth="emitTooth" />
				</div>
			</div>
		</div>
		<div class="flex flex-col">
			<div class="basic-1/4">
				<RentTooth :ntooth="15" :itooth="scheme['15']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/4">
				<RentTooth :ntooth="12" :itooth="scheme['12']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/4">
				<RentTooth :ntooth="13" :itooth="scheme['13']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/4">
				<RentTooth :ntooth="17" :itooth="scheme['17']" @tooth="emitTooth" />
			</div>
		</div>
	</div>
</template>
